<template>
  <backContainer>
    <div class="appraise_container">
      <card>
        <div class="header_search">
          <div class="ipt_search">
            <el-input
              size="small"
              class="search"
              placeholder="请输入学号"
              v-model="form.studentNum"
              clearable
            >
            </el-input>
            <el-input
              size="small"
              class="search"
              placeholder="请输入学生姓名"
              v-model="form.studentName"
              clearable
            >
            </el-input>
          </div>
          <div>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="small"
            >搜索
            </el-button>
            <el-button
              icon="el-icon-refresh"
              size="small"
              @click="resetForm"
            >重置
            </el-button>
          </div>
        </div>
        <div class="content">
          <el-table
            v-loading="loading"
            :data="studentList"
          >
            <el-table-column label="学生姓名" align="center" prop="schoolName"/>
            <el-table-column label="学号" align="center" prop="status"/>
            <el-table-column
              label="班级"
              align="center"
              prop="createTime"
              min-width="100"
            >
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.startTime).slice(0, 10) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="课程" align="center" prop="endTime"/>
            <el-table-column label="关联工作站" align="center" prop="endTime"/>
            <el-table-column label="类型" align="center" prop="endTime"/>
            <el-table-column label="学分" align="center" prop="endTime"/>
            <el-table-column label="成绩" align="center" prop="endTime"/>
            <el-table-column
              label="操作"
              align="center"
              min-width="120"
            >
              <template slot-scope="scope">
                <el-button v-preventReClick size="mini" type="text" icon="el-icon-delete"
                           @click="showDialog()"
                >评价
                </el-button>
                <el-button v-preventReClick size="mini" type="text" icon="el-icon-delete"
                           @click="showDialog()"
                >查看
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="form.pageNum"
            :limit.sync="form.pageSize"
            @pagination="getList"
          />
        </div>
      </card>
      <el-dialog title="学生评价"
                 :close-on-click-modal="false"
                 :close-on-press-escape="false"
                 :visible="showEvaluateForm" width="500px"
                 append-to-body @close="cancel()"
      >
        <el-form @submit.native.prevent ref="form" :model="evaluateForm" :rules="rules" label-width="80px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="姓名">
                xxxxxxxxx
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="学号">
                xxxxxxxxx
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="课程">
              xxxxxxxxx
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="班级">
              xxxxxxxxx
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="综合成绩">
              xxxxxxxxx
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item prop="evaluate" label="评价">
              <el-radio-group v-removeAriaHidden v-model="evaluateForm.evaluate" size="medium">
                <el-radio-button v-for="item in evaluateList" :label="item.id" :key="item.id">{{ item.value }}</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="原因">
              <el-input v-model="evaluateForm.uncheckReason" maxlength="100" show-word-limit :rows="3" type="textarea"
                        placeholder="请输入原因"
              />
            </el-form-item>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel"> 取 消</el-button>
          <el-button @click="cancel" type="primary">确 认</el-button>
        </div>
      </el-dialog>
    </div>
  </backContainer>
</template>

<script>
import { parseTime } from '@/utils/cc'

export default {
  data() {
    return {
      studentList: [],
      loading: false,
      showEvaluateForm: false,
      // 总条数
      total: 0,
      //查询参数
      form: {
        pageNum: 1,
        pageSize: 10,
        studentNum: '',
        studentName: ''
      },
      evaluateForm: {
        evaluate: '',
        uncheckReason: ''
      },
      rules: {},
      evaluateList: [
        {
          id: 1,
          value: '优秀'
        },
        {
          id: 2,
          value: '良好'
        },
        {
          id: 3,
          value: '及格'
        },
        {
          id: 4,
          value: '不及格'
        }
      ]
    }
  },
  methods: {
    parseTime,
    getList() {

    },
    resetForm() {
      this.form = {
        studentNum: '',
        studentName: ''
      }
      this.getList()
    },
    showDialog() {
      this.showEvaluateForm = true
    },
    cancel() {
      this.showEvaluateForm = false
      this.$refs['evaluateForm'].resetFields()
    }
  }
}
</script>

<style scoped lang="scss">
.appraise_container {
  margin-top: 24px;
}

.header_search {
  width: 1200px;
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-sizing: border-box;
  display: flex;

  .ipt_search {
    display: flex;

    .search {
      width: 160px;
      margin-right: 20px;
    }
  }
}

.content {
  background: white;
  padding: 0 20px;
  box-sizing: border-box;
}
</style>
